<template>
	<div class="cl-menu-topbar">
		<transition name="fade-transform" mode="out-in">
			<menu-items v-if="!isHome" :key="String(visible)" @select="toView" />
		</transition>
	</div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
export default {
	name: "cl-menu-topbar",
	inject: ["$layout"],
	components: {
		MenuItems: {
			computed: {
				...mapGetters(["app", "menuList"])
			},
			methods: {
				toView(url) {
					this.$emit("select", url);
				},
				renderMenu({ name }) {
					const vnodes = [];
					// let ignore = ["icon"];
					// if (icon && !ignore.includes(icon)) {
					// 	if (icon.includes("el-icon")) {
					// 		vnodes.push(<i class={[icon, "sub-el-icon"]} />);
					// 	} else {
					// 		vnodes.push(<icon-svg name={icon} />);
					// 	}
					// }
					if (name) {
						vnodes.push(<span slot="title">{name}</span>);
					}
					return vnodes;
				}
			},
			render() {
				const isSearch = path => {
					// return /^(\/home\/cus\/shop\/search)/.test(path);
					return path.includes("/shop/search");
				};
				const fn = list => {
					return (
						list
							.filter(e => e.isShow)
							// .reduce((prev, curr) => {
							// 	return [...prev, ...(curr.children ? curr.children : [curr])];
							// }, [])
							.map(e => {
								if (e.type == 0) {
									return (
										<el-submenu
											popper-class="cl-slider-menu__submenu"
											index={String(e.id)}
											key={e.id}>
											<template slot="title">{this.renderMenu(e)}</template>
											{fn(e.children)}
										</el-submenu>
									);
								}
								if (isSearch(e.path)) {
									return (
										<div class="menu-event" onClick={() => this.toView(e.path)}>
											<el-menu-item index={e.path} key={e.path} disabled>
												{this.renderMenu(e)}
											</el-menu-item>
										</div>
									);
								}

								return (
									<el-menu-item index={e.path} key={e.path}>
										{this.renderMenu(e)}
									</el-menu-item>
								);
							})
					);
				};
				let el = fn(this.menuList);
				return (
					<el-menu
						default-active={this.$route.path}
						mode="horizontal"
						background-color="transparent"
						collapse-transition={false}
						on-select={this.toView}>
						{el}
					</el-menu>
				);
			}
		}
	},
	data() {
		return {
			visible: true,
			index: "0"
		};
	},

	computed: {
		...mapGetters(["app", "menuList"]),
		isHome() {
			return this.$route.path == "/";
		}
	},
	watch: {
		menuList() {
			this.refresh();
		},
		"app.conf.showAMenu"() {
			this.$store.commit("SET_MENU_LIST");
		}
	},
	mounted() {
		// this.menuGroup.forEach((e, i) => {
		// 	if (this.$route.path.includes(e.path) && e.path != "/") {
		// 		this.index = String(i);
		// 		this.SET_MENU_LIST(i);
		// 	}
		// });
	},

	methods: {
		...mapMutations(["SET_MENU_LIST"]),

		toView(url) {
			// if (url.includes("/shop/search")) {
			// 	// console.log(url);
			// 	this.$layout.openCusSearch();
			// 	return;
			// }
			if (url != this.$route.path) {
				this.$router.push(url);
			}
		},
		refresh() {
			this.visible = false;
			this.$nextTick(() => {
				this.visible = true;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.cl-menu-topbar {
	::v-deep .el-menu {
		height: 50px;
		background: transparent;
		border-bottom: 0;
		overflow: hidden;
		.el-submenu {
			&__title {
				height: 50px;
				line-height: 50px;
				border-bottom: 0;
			}
			&.is-active > &__title {
				// background: rgba(255, 255, 255, 0.13);
				color: $color-primary;
			}
		}
		.menu-event {
			display: inline-block;
			.el-menu-item.is-disabled {
				cursor: pointer;
				opacity: 1;
				color: #909399;
				&:hover {
					background-color: #eee !important;
					color: $color-primary;
				}
			}
		}
		.el-menu-item {
			height: 50px;
			display: flex;
			align-items: center;
			padding: 0 12px;

			span {
				font-size: 12px;
				// margin-left: 3px;
				line-height: normal;
			}

			::v-deep .icon-svg {
				height: 18px;
				width: 18px;
				margin-right: 5px;
			}
			&:hover {
				background-color: #eee !important;
				color: $color-primary;
			}
			&.is-active {
				color: $color-primary;
				background-color: #f4ecfd !important;
				&:hover {
					background-color: #f4ecfd !important;
				}
			}
		}
	}
}
</style>
